<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        nav {
            width: 1000px;
            height: 60px;
            margin: 0 auto;
        }

        nav>ul {
            width: 1000px;
        }

        nav>ul>li {
            padding: 20px 30px;
            float: left;
        }
    </style>
</head>

<body>
    <div id="app">
        <p>
            我点击了{{count}}次按钮。
            <button @click="addCount">点我</button>
        </p>
        <p>
            <button v-on:click="test()">点击A</button>
            <button v-on:click="test2">点击B</button>
        </p>
        <div>
            <ul>
                <li v-for="num in list" @click="showNum" data-value>{{num}}</li>
            </ul>
        </div>

    </div>
    <div>
        <button onclick="showName()">点击2</button>
    </div>


</body>
<script src=" https://cdn.jsdelivr.net/npm/vue@2.6.14">
</script>
<script>
    function showName() {
        alert('我叫小明')
    }

    var a = 'aabbcc'
    console.log(window.a)
    var fun = function () {
        alert(123)
    }
    // 实例化Vue对象
    let app = new Vue({
        el: '#app',         // Vue对象在页面中的作用容器
        // 当前Vue对象设置的默认数据
        data: {
            num1: 123,
            count: 0,
            list: [
                123,
                4213,
                5122,
                511,
                2243,
            ]
        },
        // 使用生命周期
        // beforeCreate: function () {
        //     this.test()
        // },
        mounted: function () {
            this.test2()
        },

        // methods是当前应用定义的函数方法
        methods: {
            // 如果在这里使用箭头函数，那this指向是window
            test: () => {
                console.log(window.a)
                this.fun()
            },
            // 如果在这里使用是匿名函数，那this指向的就是当前应用对象
            test2: function () {
                console.log(this.num1)
            },
            addCount: function () {
                // this.count++
                if (++this.count >= 10) {
                    this.count = 0
                }
            },
            // showNum: function (e) {
            //     console.log(e.target.innerText)
            //     alert(e.target.innerText)
            // }
            showNum: function (num) {
                alert(num)
            }

        }

    })


</script>

</html>